<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>任务管理界面</title>
    <link
      rel="stylesheet"
      href="../lib/layui-v2.6.3/css/layui.css"
      media="all"
    />
    <link rel="stylesheet" href="../css/public.css" media="all" />
    <style>
      .layui-btn:not(.layui-btn-lg):not(.layui-btn-sm):not(.layui-btn-xs) {
        height: 34px;
        line-height: 34px;
        padding: 0 8px;
      }
    </style>
  </head>

  <body>
    <div class="layui-container">
      <h2>任务管理</h2>

      <!-- 输入框 -->
      <fieldset class="layui-elem-field">
        <legend>直播间链接</legend>
        <div class="layui-field-box">
          <div class="layui-form-item">
            <label class="layui-form-label">链接 1</label>
            <div class="layui-input-block">
              <input
                type="text"
                id="input1"
                class="layui-input"
                placeholder="请输入链接 1"
              />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">链接 2</label>
            <div class="layui-input-block">
              <input
                type="text"
                id="input2"
                class="layui-input"
                placeholder="请输入链接 2"
              />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">链接 3</label>
            <div class="layui-input-block">
              <input
                type="text"
                id="input3"
                class="layui-input"
                placeholder="请输入链接 3"
              />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">选择输入</label>
            <div class="layui-input-block">
              <select id="inputSelector" class="layui-select">
                <option value="input1">链接 1</option>
                <option value="input2">链接 2</option>
                <option value="input3">链接 3</option>
              </select>
            </div>
          </div>
        </div>
      </fieldset>
      <!-- 开始任务按钮 -->
      <div class="layui-form-item">
        <button class="layui-btn" id="startTask">开始任务</button>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn layui-btn-danger" id="deleteSelected">
          删除选中项
        </button>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn layui-btn-danger" id="closeSelected">
          关闭直播间
        </button>
      </div>
      <!-- 多选列表 -->
      <fieldset class="layui-elem-field">
        <legend>选择设备</legend>
        <div class="layui-field-box">
          <table class="layui-table">
            <thead>
              <tr>
                <th>
                  <input type="checkbox" id="selectAll" lay-skin="primary" />
                  全选
                </th>
                <th>设备名称</th>
                <th>设备状态</th>
                <th>当前直播间链接</th>
              </tr>
            </thead>
            <tbody id="itemList">
              <!-- 动态生成的项目将插入在这里 -->
            </tbody>
          </table>
        </div>
      </fieldset>
    </div>

    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      layui.use(["jquery", "form"], function () {
        var $ = layui.jquery;
        var form = layui.form;

        // 全选功能
        $("#selectAll").on("change", function () {
          $(".itemCheckbox").prop("checked", this.checked);
          form.render("checkbox"); // 刷新复选框以反映更改
        });

        // 点击开始任务按钮事件
        $("#startTask").on("click", function () {
          // 获取选中的项目
          var selectedItems = [];
          $(".itemCheckbox:checked").each(function () {
            selectedItems.push($(this).closest("tr").find("td:last").text());
          });

          // 获取选中的输入框
          var selectedInput = $("#inputSelector").val();
          var selectedInputs = $(".itemCheckbox:checked"); // 选择所有选中的复选框
          var selectedValues = [];
          // 遍历选中的复选框并收集它们的值
          selectedInputs.each(function () {
            selectedValues.push(
              $(this).closest("tr").find("td:nth-child(2)").text()
            ); // 获取对应的 deviceName
          });

          // 输出选中的值
          console.log(selectedValues);
          var inputValue = $("#" + selectedInput).val();
          //   alert(
          //     "选中的项目: " +
          //       selectedItems.join(", ") +
          //       "\n输入值: " +
          //       inputValue
          //   );

          selectedValues.forEach(function (inputId) {
            if (inputValue) {
              // 确保值不为空
              // 准备 postData 对象
              var postData = {
                deviceName: inputId, // 使用当前输入框的值作为设备名称
                taskParams: inputValue, // 将当前值放入 taskParams 数组中
              };

              // 执行 AJAX 请求
              $.ajax({
                url: "/api/device/accountStartTask", // API 地址
                method: "POST", // 请求方法
                contentType: "application/json", // 请求内容类型
                data: JSON.stringify(postData), // 将数据转换为 JSON 字符串
                success: function (response) {
                  // 处理成功的响应
                  console.log("请求成功:", response);
                  var iframeIndex = parent.layer.getFrameIndex(window.name);
                  location.reload();
                  //   parent.layer.close(iframeIndex);
                  //   parent.renderTable();
                },
                error: function (xhr, status, error) {
                  // 处理错误响应
                  console.error("编辑类目失败:", xhr.responseJSON);
                  layer.msg(`编辑类目失败，${xhr.responseJSON.message}`);
                },
              });
            }
          });
        });
      });
      $("#deleteSelected").on("click", function () {
        var selectedDeviceNames = [];
        $(".itemCheckbox:checked").each(function () {
          selectedDeviceNames.push(
            $(this).closest("tr").find("td:nth-child(2)").text()
          ); // 获取设备名称
        });

        if (selectedDeviceNames.length === 0) {
          layer.msg("请先选择要删除的设备");
          return; // 如果没有选中项，提示用户
        }

        // 确认删除操作
        layer.confirm(
          "确认删除选中的设备吗？",
          { icon: 3, title: "提示" },
          function (index) {
            console.log("选中的设备", selectedDeviceNames);
            // 执行删除请求
            $.ajax({
              url: "/api/device/deleteDevices", // API 地址
              method: "POST", // 请求方法
              contentType: "application/json", // 请求内容类型
              data: JSON.stringify({ deviceNames: selectedDeviceNames }), // 将设备名称数组转换为 JSON 字符串
              success: function (response) {
                console.log("删除成功:", response);
                layer.msg(response.message); // 提示用户删除成功
                location.reload(); // 重新加载页面
              },
              error: function (xhr, status, error) {
                let errorMsg = xhr.responseJSON
                  ? xhr.responseJSON.message
                  : "未知错误";
                console.error("删除设备失败:", errorMsg);
                layer.msg(`删除设备失败，${errorMsg}`);
              },
            });
            layer.close(index); // 关闭确认框
          }
        );
      });
      $("#closeSelected").on("click", function () {
        // 获取选中的项目
        var selectedItems = [];
        $(".itemCheckbox:checked").each(function () {
          selectedItems.push($(this).closest("tr").find("td:last").text());
        });

        // 获取选中的输入框
        var selectedInput = $("#inputSelector").val();
        var selectedInputs = $(".itemCheckbox:checked"); // 选择所有选中的复选框
        var selectedValues = [];
        // 遍历选中的复选框并收集它们的值
        selectedInputs.each(function () {
          selectedValues.push(
            $(this).closest("tr").find("td:nth-child(2)").text()
          ); // 获取对应的 deviceName
        });
        console.log(selectedValues);
        // 输出选中的值

        var inputValue = "https://www.douyin.com/";
        //   alert(
        //     "选中的项目: " +
        //       selectedItems.join(", ") +
        //       "\n输入值: " +
        //       inputValue
        //   );

        selectedValues.forEach(function (inputId) {
          if (inputValue) {
            // 确保值不为空
            // 准备 postData 对象
            var postData = {
              deviceName: inputId, // 使用当前输入框的值作为设备名称
              taskParams: inputValue, // 将当前值放入 taskParams 数组中
            };

            // 执行 AJAX 请求
            $.ajax({
              url: "/api/device/accountStartTask", // API 地址
              method: "POST", // 请求方法
              contentType: "application/json", // 请求内容类型
              data: JSON.stringify(postData), // 将数据转换为 JSON 字符串
              success: function (response) {
                // 处理成功的响应
                console.log("请求成功:", response);
                var iframeIndex = parent.layer.getFrameIndex(window.name);
                location.reload();
                //   parent.layer.close(iframeIndex);
                //   parent.renderTable();
              },
              error: function (xhr, status, error) {
                // 处理错误响应
                console.error("编辑类目失败:", xhr.responseJSON);
                layer.msg(`编辑类目失败，${xhr.responseJSON.message}`);
              },
            });
          }
        });
      });

      // 从 API 获取数据
      $(document).ready(function () {
        // 从 API 获取数据
        $.ajax({
          url: "/api/device/getDevices",
          method: "GET",
          dataType: "json",
          success: function (response) {
            // 检查 response.data 是否为数组
            var itemList = $("#itemList");
            itemList.empty(); // 清空之前的内容

            if (Array.isArray(response.data)) {
              // 如果 response.data 是数组
              // 按 deviceName 排序
              response.data.sort(function (a, b) {
                // 假设 deviceName 是字符串，根据需要调整比较方式
                return a.deviceName.localeCompare(b.deviceName);
              });

              response.data.forEach(function (item) {
                // 获取 deviceName 和 accountStatus
                var row = `
                        <tr>
                            <td><input type="checkbox" class="itemCheckbox" lay-skin="primary"></td>
                            <td>${item.deviceName}</td> <!-- 显示 deviceName -->
                            <td>${item.accountStatus}</td> <!-- 显示 accountStatus -->
                            <td>${item.work}</td> <!-- 显示 work -->
                        </tr>
                    `;
                itemList.append(row); // 添加到表格中
              });
            } else {
              console.error("返回的数据不是数组:", response.data);
              itemList.append('<tr><td colspan="3">没有数据可显示</td></tr>');
            }
          },
          error: function (xhr, status, error) {
            console.error("获取数据失败:", error);
            $("#itemList").append(
              '<tr><td colspan="3">获取数据失败，请稍后重试</td></tr>'
            );
          },
        });
      });
    </script>
  </body>
</html>
